<template>
  <div class="wrap">
    <img class="banner" src="../../assets/banner-top.png" alt="" srcset="">
    <div class="list">
      <h3>报价时间：{{time}}</h3>
      <ul>
        <li>
          <h4>油品</h4>
          <h4>油号</h4>
          <h4>元/吨</h4>
        </li>
        <li class="item" v-for="item in oilInfo" :key="item.id">
          <p>{{item.oilName}}</p>
          <p>{{item.oilNum}}</p>
          <p class="act">{{item.price}}</p>
        </li>
       
      </ul>
    </div>
  </div>
</template>

<script>
import {oilList} from '../../utils/interface'
export default {
  name: '',
  data () {
    return {
      oilInfo:null,
      time:""
    }
  },
  methods:{
    getList(){
      oilList().then(res=>{
        console.log(res.data.data)
        res.data.data.row.list.map(item=>{item.price = (item.price/100).toFixed(2)})
        this.oilInfo = res.data.data.row.list
        this.time = res.data.data.row.offerTime
      })
    }
  },
  mounted(){
    this.getList()
  }
}
</script>

<style lang ="scss" scoped>
.wrap{
  height: 100vh;
  background: #F8F8F8;
  overflow: hidden;
}
.banner{
  width: 9.2rem;
  height: 5.733333rem;
  margin: 10px auto 1.066667rem;
  display: block;
}
.list{
  width: 9.2rem;
  background: #fff;
  margin: 0 auto;
  padding: 15px 0;
  h3{
    color: #333;
    font-size: .5rem;
    margin-left: .48rem;
    margin-bottom: .4rem;
  }
  ul{
    list-style: none;
    margin: 0 .48rem 0 .48rem;
    .item{
      border-bottom: .5px solid #e5e5e5;
    }
    .item:last-child{
      border: none;
    }
    li{
      display: flex;
      align-items: center;
      height: 1.2rem;
      justify-content: space-between;
      h4{
        font-size: .4rem;
        color: #555;
        width: 1.8rem;
        text-align: center;
      }
      p{
        color: #555;
        font-size: .32rem;
        width: 1.8rem;
        text-align: center;
      }
      .act{
        background: #9CD8FA;
        color: #fff;
        padding: 3px 0;
        border-radius: .266667rem;
      }
    }
  }
}
</style>
